@import '../../../stylesheets/variables';

.jumping-dots {
  position: relative;
  text-align: center;
  padding: 0 $global-spacing * 0.5;
}

.jumping-dots__dot {
  display: inline-block;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  margin-right: 3px;
  background: #303131;
  animation: dots-wave 1s linear infinite;

  &:nth-child(2) {
    animation-delay: -0.9s;
  }

  &:nth-child(3) {
    animation-delay: -0.8s;
  }
}

@keyframes dots-wave {
  0%,
  60%,
  100% {
    transform: initial;
  }

  30% {
    transform: translateY(-8px);
  }
}
